<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>06_CSS3D-创建空间</title>
  <!-- 
  CSS3D 创建空间的概念主要是通过使用 CSS 的  `transform`  属性来实现三维效果。通过这种方式，可以在网页上创建出具有深度感和立体效果的元素。
  1. 基本概念
  - 三维转换：CSS3 提供了  `transform`  属性的一些函数，例如  `rotateX()` 、 `rotateY()` 、 `rotateZ()`  和  `translateZ()` ，可以用来实现三维效果。
  - 透视效果：通过设置  `perspective`  属性，可以创建一个透视效果，使得元素在三维空间中看起来具有深度。

  2. 关键属性
  -  `transform` ：用于应用变换效果的属性，包括旋转、缩放、平移等。
  -  `perspective` ：定义了观察者与 z=0 平面的距离，影响三维效果的深度感。
  -  `perspective-origin` ：设置透视的原点，决定了观察者的视角。

  3. 使用示例
  以下是一个简单的示例，展示如何使用 CSS3D 创建空间效果：

  HTML 结构：
  <div class="scene">
      <div class="cube">
          <div class="face front">Front</div>
          <div class="face back">Back</div>
          <div class="face left">Left</div>
          <div class="face right">Right</div>
          <div class="face top">Top</div>
          <div class="face bottom">Bottom</div>
      </div>
  </div>
  CSS 样式：
  .scene {
      width: 200px;
      height: 200px;
      perspective: 600px; /* 设置透视效果 */
  }

  .cube {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d; /* 保留 3D 效果 */
      animation: rotate 5s infinite linear; /* 旋转动画 */
  }

  .face {
      position: absolute;
      width: 200px;
      height: 200px;
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid #ccc;
      line-height: 200px;
      text-align: center;
      font-size: 20px;
  }

  /* 定义每个面的位置 */
  .front  { transform: translateZ(100px); }
  .back   { transform: rotateY(180deg) translateZ(100px); }
  .left   { transform: rotateY(-90deg) translateZ(100px); }
  .right  { transform: rotateY(90deg) translateZ(100px); }
  .top    { transform: rotateX(90deg) translateZ(100px); }
  .bottom { transform: rotateX(-90deg) translateZ(100px); }

  @keyframes rotate {
      from { transform: rotateY(0); }
      to { transform: rotateY(360deg); }
  }
  4. 注意事项
  - 性能：使用 CSS3D 创建空间效果时，确保使用 GPU 加速的属性（如  `transform`  和  `opacity` ），以提高性能。
  - 兼容性：CSS3D 在现代浏览器中得到了广泛支持，但在某些旧版本的浏览器中可能会存在兼容性问题。

  5. 总结
  CSS3D 创建空间效果为网页设计提供了丰富的视觉效果。通过使用  `transform` 、 `perspective`  和  `transform-style`  等属性，开发者可以轻松地创建立体效果和动画。这种效果可以增强用户体验，使网页更加生动和吸引人。掌握 CSS3D 的使用，可以帮助开发者设计出更具创意和互动性的用户界面。
  -->
  <style>
    body {
      margin: 0;
      padding: 100px;
      background-image: url(../images/grid.png);
    }

    .perserve-3d-box {
      position: relative;
      width: 200px;
      height: 100px;
      background-color: lightblue;

      /* 在父元素中添加 transform-style来启用3D空间 */
      transform-style: preserve-3d;
      /* 在父元素添加透视效果 */
      perspective: 300px;
    }

    .perserve-3d {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: pink;
      transform: rotateX(70deg) translateX(50px);
    }

    /* transform-style-正方体 */
    .box {
      position: relative;
      width: 100px;
      height: 100px;
      /* background-color: lightblue; */

      /* 在父元素中添加 transform-style来启用3D空间 */
      transform-style: preserve-3d;
      /* transform: rotateX(-33.5deg) rotateY(45deg) scaleZ(1); */
      transform: rotateX(-33.5deg) rotateY(45deg) scaleZ(1);
      animation: rotate 8s linear infinite;
    }

    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .top {
      background-color: rgba(0, 0, 0, .4);
      transform: rotateX(90deg) translateZ(50px);
    }
    .bottom {
      background-color: rgba(255, 0, 0, .4);
      transform: rotateX(-90deg) translateZ(50px);
    }
    .front {
      background-color: rgba(255, 255, 0, .4);
      transform: rotateY(0deg) translateZ(50px);
    }
    .back {
      background-color: rgba(255, 0, 255, .4);
      transform: rotateY(-180deg) translateZ(50px);
    }
    .left {
      background-color: rgba(0,255, 0, .4);
      transform: rotateY(-90deg) translateZ(50px);
    }
    .right {
      background-color: rgba(0, 0, 255, .4);
      transform: rotateY(90deg) translateZ(50px);
    }
    
    @keyframes rotate {
      from { transform: rotateX(-33.5deg) rotateY(0); }
      to { transform: rotateX(-33.5deg) rotateY(360deg); }
    }
  </style>
</head>
<body>

  <h2>1. 创建3d空间</h2>
  <div class="perserve-3d-box">
    perserve-3d-box
    <div class="perserve-3d">perserve-3d</div>
  </div>

  <h2>2. transform-style-正方体</h2>
  <div class="box">
    <div class="item top">1</div>
    <div class="item bottom">2</div>
    <div class="item left">3</div>
    <div class="item right">4</div>
    <div class="item front">5</div>
    <div class="item back">6</div>
  </div>
  
</body>
</html>